<template>
  <div class="p-d">
    <div class="b-f p-d">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待受理" name="wait"></el-tab-pane>
        <el-tab-pane label="受理完成" name="successWait"></el-tab-pane>
        <el-tab-pane label="地方预约信息" name="local"></el-tab-pane>
      </el-tabs>
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
      <div class="m-t">
        <TableCompEle class="m-t" ref="multipleTable" height="50vh" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction"
          :isSelect="true" :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList"
          @handleSelectionChange="handleSelectionChange"></TableCompEle>
      </div>
    </div>
    <AddComp ref="addRef" @close="getList" />
    <AddSelfComp ref="addSelfRef" @close="getList" />
  </div>
</template>

<script>
import {
  getAppointmentList
} from '@/api/yqgx/appointment'
import AddComp from './common/add.vue'
import AddSelfComp from '@/views/Information/evaluatePge/selfEvaluation/common/add.vue'
export default {
  components: { AddComp, AddSelfComp },
  data() {
    return {
      activeName: 'all',
      queryParams: {
        total: 3,
        currentPage: 1,
        pageSize: 10
      },
      allData:[],
      tableData: [
        {
          title: '中国散裂中子源',
          need: '模拟的实验环境',
          name: '探究物质微观结构的“超级显微镜”',
          property: '科研性质',
          startTime: '2023-04-01',
          endTime: '2024-01-31',
          applyName: '陈冬雪',
          applyPhone: '010-23543221',
          companyName: '广东省科学技术厅',
          answer: '受理'
        },
        {
          title: '全超导托卡马克核聚变实验装置（EAST)',
          need: '运行磁约束核聚变',
          name: '基于湍动电流自主调节的内部温度垒的深入研究',
          property: '科研性质',
          startTime: '2023-07-01',
          endTime: '2025-01-31',
          applyName: '黄华丽',
          applyPhone: '13823427618',
          companyName: '中国科学院合肥物质科学研究院',
          answer: '受理'
        },
        {
          title: '北京正负电子对撞机',
          need: '探测器电性能测试',
          name: '适配BEPCII高计数率运行',
          property: '非科研性质',
          startTime: '2023-12-01',
          endTime: '2024-06-28',
          applyName: '刘倩',
          applyPhone: '010-3459483',
          companyName: '中国科学院高能物理研究所',
          answer: '不受理'
        }
      ],
      tableConfig: [
        {
          prop: 'title',
          label: '共享资源名称'
        },
        {
          prop: 'need',
          label: '共享使用需求'
        },
        {
          prop: 'name',
          label: '课题(任务)名称'
        },
        {
          prop: 'property',
          label: '课题(任务)性质'
        },
        {
          prop: 'startTime',
          label: '预约起始时间'
        },
        {
          prop: 'endTime',
          label: '预约结束时间'
        },
        {
          prop: 'applyName',
          label: '申请人'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(150),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$refs.addRef.show({
                title: '查看服务预约信息',
                isLook: 'look',
                data: row
              })
            }
          },
          {
            label: '预约受理',
            isLink: true,
            type: 'primary',
            isShow: (row) => {
              return !(row.answer)
              // return this.activeName !== 'successWait'
            },
            method: row => {
              this.$refs.addRef.show({
                title: '预约受理',
                isLook: 'answer',
                data: row
              })
            }
          },
          {
            label: '查看评价',
            isLink: true,
            type: 'primary',
            isShow: (row) => {
              return row.answer
              // return this.activeName === 'successWait'
            },
            method: (row) => {
              this.$refs.addSelfRef.show({
                title: '评价',
                isLook: 'look',
                data: row
              })
            }
          }
        ]
      },
      queryString: {
        title: '',
        source: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '共享资源名称',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              source: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getAppointmentList().then((res) => {
        this.tableData = res.data
        this.allData = this.tableData
        this.handleClick()
      })
    },
    handleClick() {
      if (this.activeName == "all") {
        this.tableData = this.allData
      }
      else if (this.activeName == "wait") {
        this.tableData = this.allData.filter(item => !item.answer)
      }
      else if (this.activeName == "successWait") {
        this.tableData = this.allData.filter(item => item.answer)
      }
      else{
        this.tableData = this.allData
      }
    },
  }
}
</script>

<style lang="less" scoped></style>